<template>
	<view class="page">
		<view class="hog-header">
			<uni-search-bar placeholder="请输入ICCID搜索" radius="100" :value="iccid" 
					@confirm="search" @cancel="cancelSearch" cancelButton="auto" />
			<ms-dropdown-menu>
				<ms-dropdown-item v-model="houseId" :list="option1" style="flex: 1;" />
				<ms-dropdown-item v-model="coteId" :list="option2" :title="coteName" style="flex: 1;" />
			</ms-dropdown-menu>
		</view>
		<!-- 正常主体列表 -->
		<view class="hog-main">
			<view class="hog-main-ul" v-for="(item) in hogdata" :key="item.id">
				<view class="li-top">
					<view>
						<text>{{ item.houseName }}</text><text>/</text>
						<text>{{ item.coteName }}</text><text>/</text>
						<text>{{ item.code }}</text>
					</view>
					<uni-icons type="more-filled" @click="clickCote(item.code,item.id)"></uni-icons>
				</view>
				<view class="li-bottom">
					出生日期 :
					<text>{{ item.birthday }}</text>
				</view>
				<view class="li-bottom">
					ICCID :
					<text>{{ item.iccid }}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="more"></uni-load-more>
		<uni-fab :pattern="pattern" :popMenu="false" horizontal="right" vertical="bottom" direction="vertical" @fabClick="toHogAddPage()"></uni-fab>
	</view>
</template>

<script>
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'

	export default {
		components: {
			msDropdownMenu,
			msDropdownItem
		},
		data() {
			return {
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#7A7E83',
					buttonColor: '#05ac9d'
				},
				hogdata: [],
				option1: [{
					text: '全部畜舍',
					value: 0
				}],
				option2: [{
					text: '全部畜栏',
					value: 0
				}],
				houseId: 0,
				coteId: 0,
				iccid: '',
				params: {
					page: 1,
					rows: 5,
				},
				page: {
					totalRows: 0,
					totalPage: 0
				},
				more: 'noMore' //可选值：more（loading前）、loading（loading中）、noMore（没有更多了）
			};
		},
		onLoad() {
			this.getHouses()
			this.reLoad()
		},
		onReachBottom() {
			// 页面触底后，上滑加载更多
			this.nextPage()
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.reLoad();
		},
		computed: {
			coteName: function() {
				var text = this.option2[0].text;
				this.option2.forEach(e => {
					if (e.value == this.coteId) {
						text = e.text;
					}
				})
				return text
			}
		},
		watch: {
			houseId: function(val) {
				if (val === 0) {
					delete this.params.houseId
				} else {
					this.params.houseId = val
				}
				this.getCotes()
				this.reLoad()
			},
			coteId: function(val) {
				if (val === 0) {
					delete this.params.coteId
				} else {
					this.params.coteId = val
				}
				this.reLoad()
			}
		},
		methods: {
			getHouses: function() {
				this.$u.api.getHouses().then(res => {
					var houses = [{
						text: '全部畜舍',
						value: 0
					}]
					res.data.forEach(e => {
						houses.push({
							text: e.houseName,
							value: e.id
						});
					})
					this.option1 = houses
				})
			},
			getCotes: function() {
				var cotes = [{
					text: '全部畜栏',
					value: 0
				}]
				this.coteId = 0;

				if (this.houseId === 0) {
					this.option2 = cotes
				} else {
					this.$u.api.getCotes(this.houseId).then(res => {
						res.data.forEach(e => {
							cotes.push({
								text: e.coteName,
								value: e.id
							});
						})
						this.option2 = cotes
					})
				}
			},
			loadHogList: function() {
				this.$u.api.listHog(this.params).then(res => {
					if (this.params.page === 1) {
						this.hogdata = res.rows;
					} else {
						this.hogdata.push(...res.rows);
					}
					this.page.totalRows = res.total;
					this.page.totalPage = Math.ceil(res.total / 5);
					uni.stopPullDownRefresh();
				})
			},
			search: function(e) {
				this.params.iccid = e.value
				this.reLoad()
			},
			cancelSearch: function() {
				delete this.params.iccid 
				this.reLoad()
			},
			reLoad: function(){
				this.params.page = 1
				this.loadHogList()
			},
			nextPage: function() {
				if (this.params.page >= this.page.totalPage) {
					this.more = 'noMore'
				} else {
					this.more = 'loading';
					this.params.page++;
					this.loadHogList();
					this.more = 'more';
				}
			},
			clickCote: function(name, id) {
				uni.showActionSheet({
					title: '操作',
					itemList: ['修改牲畜-' + name, '删除牲畜-' + name],
					success: (e) => {
						if (e.tapIndex === 0) {
							this.toHogEditPage(id)
						} else {
							this.deleteHog(id)
						}
					}
				})
			},
			toHogAddPage: function() {
				uni.navigateTo({
					url: './hog_add'
				});
			},
			toHogEditPage: function(id) {
				uni.navigateTo({
					url: './hog_edit?id=' + id
				});
			},
			deleteHog: function(id) {
				const that = this
				uni.showModal({
					content: '确认删除该牲畜',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading()
							that.$u.api.deleteHog(id).then(res => {
								that.$dm.showSuccess()
								setTimeout(() => {
									that.reLoad()
								}, 1000)
							}).catch(err => {
								uni.hideLoading()
							})
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	/* 顶部布局 */
	.hog-header {
		position: fixed;
		height: 100px;
		width: 100%;
		z-index: 99;

		.uni-searchbar {
			background-color: #05ac9d !important;
			padding-top: 2px;
			padding-bottom: 10px;
		}

		.dropdown-menu {
			border-bottom: 1px solid $uni-bg-color-grey;
		}

	}

	.hog-main {
		padding-top: 90px;
	}

	/* 列表样式 */
	.hog-main-ul {
		box-sizing: border-box;
		width: 750rpx;
		height: 240rpx;
		margin-top: 10px;
	}

	.li-top {
		box-sizing: border-box;
		color: #999999;
		padding: 0 30rpx 0 30rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		border-bottom: 1rpx solid #efefef;

		view {
			text {
				padding-left: 2px;
				padding-right: 2px;
				color: #05ac9d;
			}
		}

		.tag_isonline {
			font-size: $uni-font-size-sm;
			margin-top: 10px;
			border-radius: 12rpx;
			height: 20px;
			line-height: 20px;
			padding: 0 12rpx 0 12rpx;
		}

		.online {
			background-color: $uni-color-primary;
			color: $uni-text-color-inverse;
		}

		.offline {
			background-color: $uni-bg-color-grey;
			color: $uni-text-color-grey;
		}
	}

	.li-bottom {
		box-sizing: border-box;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		padding-left: 30rpx;
		color: #999999;
		font-size: 13px;
	}
</style>
